<template>
  <div class="index">
    <scroller
      :on-refresh="refresh"
      :on-infinite="infinite"
      ref="my_scroller"
      refresh-layer-color="#ed007c"
      loading-layer-color="#ed007c">
      <div>
        <!--banner-->
        <div class="banner"><img src="../../static/images/banner.png" alt="banner"></div>
        <div class="player-box">
          <!--前三名-->
          <div class="ranking-top ">
            <p class="pr"><span class="title">丽人榜</span>
              <span
                style="color:#666;font-size:14px;width:64%;position: absolute;top: 0;right: -15px;overflow: hidden;white-space:nowrap;height: 45px">
                <span class="tr"
                      style="position: absolute;right: 0px;">
                选手票数相同时，以号牌为先后顺序展示（不影响排名）
              </span>
              </span>
            </p>
            <div class="box">
              <ul>
                <li @click='toWhere(item.option_id)' :data-id="item.option_id" v-for="(item,i) in top3" :key="i">
                  <span :class="'player-ranking-img'+i"></span>
                  <div class="player-img">
                    <img :src="item.img">
                  </div>
                  <div style="height:35px;line-height:35px" v-text="item.self_no + '.'+ item.name"></div>
                </li>
              </ul>
            </div>
          </div>
          <!--所有选手-->
          <div class="all-player">
            <div class="">
              <div class="box">
                <div class="title">- 丽人秀 -</div>
                <ul>
                  <li @click='toWhere(item.option_id)' :data-id="item.option_id" v-for="(item,i) in allPlayer" :key="i">
                    <div class="player-img">
                      <img :src="item.img"></div>
                    <div class="player-msg" v-text="item.self_no+ '.'+ item.name">
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!--广告位-->
        <!--<div class="advertising" >-->
        <!--广告位-->
        <!--</div>-->
      </div>
    </scroller>
  </div>
</template>
<script>
  import  {getTop3, getAllplayer, getConfig, shareCallback} from  '../api'
  import  {mapState} from 'vuex'
  export default {
    data() {
      return {
        //前三名选手
        top3: [],
        // 所有选手
        allPlayer: [],
        // 页码
        pageNo: 1,
        total: 0
      }
    },
    computed: {
      ...mapState({
        //角色
        role: state => state.vux.adminMsg.role,
        option_id: state => state.vux.adminMsg.option_id,
      })
    },
    methods: {
      // 获取前三名
      _getTop3(){
        this.$http.get(getTop3()).then(res => {
          this.top3 = res.data.data;
        })
      },
      // 所有选手
      _getAllplayer(){

        if (this.total) {
          if (this.allPlayer.length >= this.total) return
        }
        this.$http.get(getAllplayer(), {
          params: {
            page_no: this.pageNo
          }
        }).then(res => {
          this.total = res.data.count;
          let list = res.data.data;

          for (let i = 0; i < list.length; i++) {
            this.allPlayer.push(list[i])
          }
          this.pageNo++
        })
      },
      // 刷新页面
      refresh(done) {
        setTimeout(() => {
          this.pageNo = 1;
          this.top3 = [];
          this.allPlayer = [];
          this._getTop3();
          this._getAllplayer();
          done()
        }, 1000)
      },
      // 加载更多
      infinite(done) {
        if (this.allPlayer.length >= this.total) {
          setTimeout(() => {
            done(true)
          }, 1000);
        } else {
          setTimeout(() => {
            this._getAllplayer();
            done()
          }, 500)
        }


      },
      // 要跳转到哪里
      toWhere(id) {
        if (this.option_id == id) { //1
          this.$router.push({path: '/detailsMe', query: {id: id}})
        } else {
          this.$router.push({path: '/details', query: {id: id}})
        }
      }
    },
    created(){

      this._getTop3();
      this._getAllplayer();
      var link = window.location.href;
      this.wxShare('中国丽人秀,秀出你的美', '快来投出你心怡的丽人吧', link)
    },
    components: {},
    mounted(){

    }
  }
</script>

<style lang='less' rel="stylesheet/less" scoped type="text/less">
  @col: #ed007c;
  a {
    color: #666;
  }

  .player-box {
    background-color: #f5f5f5;
  }

  .index {
    background-color: #f5f5f5;
  }

  // banner图片
  .banner {
    width: 100%;
    img {
      width: 100%;
      display: block;
    }
  }

  .tr {
    animation: ttt 10s linear infinite;
  }

  @keyframes ttt {
    from {
      transform: translate(110%);
    }
    to {
      transform: translate(-64%);
    }

  }

  // 前三名
  .ranking-top {
    padding: 0 15px;
    background-color: #fff;
    margin-bottom: 10px;
    p {
      height: 45px;
      line-height: 45px
    }
    .title {
      color: @col;
      font-size: 16px;
      vertical-align: middle;
    }
    .title:before {
      content: '';
      background: url('../../static/images/lireb.png') no-repeat;
      display: inline-block;
      background-size: cover;
      width: 17px;
      height: 16px;
      margin-right: 10px;
    }
    .box {
      > ul {
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        li {
          text-align: center;
          font-size: 17px;
          position: relative;
          color: #666;
          // 皇冠
          > span {
            z-index: 2;
            width: 25.5px;
            height: 23px;
            position: absolute;
            right: -6px;
            top: -10px;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }
      }
      .player-ranking-img0 {
        background-image: url("../../static/images/0.png");
      }
      .player-ranking-img1 {
        background-image: url("../../static/images/1.png");
      }
      .player-ranking-img2 {
        background-image: url("../../static/images/2.png");
      }
    }
    // 选手图片
    .player-img {
      background: url("../../static/images/bg.png") no-repeat;
      background-size: cover;
      width: 4.48rem;
      height: 4.48rem;
      border-radius: 5px;
      overflow: hidden;
      img {
        display: block;
        width: 100%;
      }
    }
  }

  // 广告
  .advertising {
    background: url("../../static/images/banner.png") no-repeat #8cc8f7;
    background-size: cover;
    position: absolute;
    bottom: 0;
    height: 140px;
    width: 100%;
  }

  .rotate {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
  }

  .pullup-arrow {
    display: block;
    transition: all linear 0.2s;
    -webkit-transition: all linear 0.2s;
    color: #666;
    font-size: 25px;
  }

  .all-player {
    padding: 0 15px;
    background: #fff;
    font-size: 15px;
    color: #666;
    .box {
      .title {
        text-align: center;
        color: @col;
        height: 45px;
        line-height: 45px;
      }
      > ul {
        width: 100%;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        text-align: center;
        li {
          // 选手图片
          .player-img {
            background: url("../../static/images/bg.png") no-repeat;
            background-size: cover;
            width: 3.413rem;
            height: 3.413rem;
            border-radius: 5px;
            overflow: hidden;
            img {
              display: block;
              width: 100%;
            }
          }
        }
      }
      .player-msg {

        height: 35px;
        line-height: 35px;
        margin-bottom: 10px;
      }
    }
  }
</style>



